<template>
    <section>
        <div class="applyed">
            <div class="banner">
                <img class="banner-img" :src="handleImg('console/memberBenefits-banner.png')" alt="">
            </div>

            <div class="page-item">
                <div class="title">会员等级</div>
                <div class="text mb-24">说明：会员等级取决于近90天内获得的成长值，90天内的成长值累计一旦满足条件，则自动触发升级。等级规则如下：</div>
                <a-table :dataSource="memberList" :pagination="false" class="mb-24">
                    <a-table-column key="level" title="等级" data-index="level" />
                    <a-table-column key="user" title="普通用户" data-index="user" ellipsis="true" />
                    <a-table-column key="GpuMallUser" title="GpuMall" data-index="GpuMallUser" ellipsis="true" />
                </a-table>
                <div class="text">举例1：当前时间为2023-10-18
                    12:00:00，近90天也就是2023-10-18~2024-01-15，在这段时间内累计获得正好300成长值，则立即升级为GPUMall会员。 </div>
                <div class="text">举例2：如果当前未进行学生认证，那么现在认证学生会立即使用学生会员升级规则，触发升级会员。</div>
            </div>

            <div class="page-item">
                <div class="title">会员成长规则</div>
                <div class="text">1.每充值1元 获 1成长值，如退款则成长值清零；</div>
                <div class="text">2.若其他任务可获成长值，具体请参考网站活动；</div>
            </div>

            <div class="page-item">
                <div class="title">会员权益</div>
                <a-table :dataSource="tableList" :columns="tableColumns" :pagination="false" bordered>

                </a-table>
            </div>

        </div>

    </section>
</template>

<script setup name="MemberBenefits">
import { ref, onMounted } from 'vue'

const memberList = ref([
    { level: '会员条件（学生）', user: '-', GpuMallUser: '学生认证' },
    { level: '会员条件（非学生）', user: '近90天成长值>=0', GpuMallUser: '近90天成长值>=300' },
])


const tableList = ref([
    { product: '折扣', user: '-', student: '9.5折', GpuMallUser: '' },
    { product: '会员条件（非学生）', user: '近90天成长值>=0', student: '近90天成长值>=300', GpuMallUser: '' },
    { product: '...更多权益，敬请期待...' },
    { product: '备注：具体价格请以网站实时显示价格为准' },
])

const tableColumns = ref([
    {
        title: '',
        dataIndex: 'product',
        key: 'product',
    },
    {
        title: '普通用户',
        dataIndex: 'user',
        key: 'user',
    },
    {
        title: '认证学生',
        dataIndex: 'student',
        key: 'student',
    },
    {
        title: 'GpuMall用户',
        dataIndex: 'GpuMallUser',
        key: 'GpuMallUser',
    },
])

</script>

<style scoped lang="scss">
.banner {
    position: relative;
    margin: 0 auto 50px;

    .banner-img {
        width: 100%;
    }
}

.page-item {
    margin-bottom: 36px;
}

.title {
    color: #223354;
    font-family: PingFang SC;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 24px;
}

.text {
    color: #646F87;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

::v-deep(.page-content .ant-table-thead>tr>th) {
    color: #8A93A7;
    font-size: 14px;
    background: #F3F5F7;
    border: none;

    &::before {
        display: none;
    }
}
</style>